

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>转载一些工具、库、框架、优秀的博客技术网站 - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2105453170,3037338344&fm=26&gp=0.jpg') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="转载一些工具、库、框架、优秀的博客技术网站">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-12-29 14:11" pubdate>
        2020年12月29日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      8k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      95
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">转载一些工具、库、框架、优秀的博客技术网站</h1>
            
            <div class="markdown-body">
              <p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6911251933386768391?utm_source=gold_browser_extension#heading-7">转自掘金</a></p>
<h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/diegocard/awesome-html5">awesome-html5</a> 精选的HTML5资源精选清单</li>
</ul>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><ul>
<li><a target="_blank" rel="noopener" href="https://tailwindcss.com/">tailwindcss</a> 与Tailwind CSS相关的很棒的事情</li>
<li><a target="_blank" rel="noopener" href="https://github.com/troxler/awesome-css-frameworks">awesome-css-frameworks</a> 很棒的CSS框架列表</li>
<li><a target="_blank" rel="noopener" href="https://github.com/jobbole/awesome-css-cn">awesome-css-cn</a> CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等</li>
<li><a target="_blank" rel="noopener" href="https://github.com/awesome-css-group/awesome-css">awesome-css</a> 精彩CSS的精选内容:)</li>
</ul>
<h2 id="预处理器"><a href="#预处理器" class="headerlink" title="预处理器"></a>预处理器</h2><h3 id="Sass"><a href="#Sass" class="headerlink" title="Sass"></a>Sass</h3><ul>
<li><a target="_blank" rel="noopener" href="https://sass-lang.com/">sass</a> 专业级 CSS扩展语言。</li>
</ul>
<h3 id="Less"><a href="#Less" class="headerlink" title="Less"></a>Less</h3><ul>
<li><a target="_blank" rel="noopener" href="http://lesscss.org/">lesscss</a> - 动态样式表语言。</li>
</ul>
<h3 id="Styuls"><a href="#Styuls" class="headerlink" title="Styuls"></a>Styuls</h3><ul>
<li><a target="_blank" rel="noopener" href="http://stylus-lang.com/">stylus</a> 为Node.js构建的富有表现力，健壮，功能丰富的CSS语言</li>
</ul>
<h2 id="样式初始化"><a href="#样式初始化" class="headerlink" title="样式初始化"></a>样式初始化</h2><ul>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_36595013/article/details/82317282">CSS Reset(样式重置)与Normalize.css详解</a></li>
</ul>
<h3 id="Normalize-css"><a href="#Normalize-css" class="headerlink" title="Normalize.css"></a>Normalize.css</h3><ul>
<li><a target="_blank" rel="noopener" href="http://necolas.github.io/normalize.css/">Normalize.css</a> CSS重置的现代替代方法</li>
</ul>
<h2 id="Tailwindcss"><a href="#Tailwindcss" class="headerlink" title="Tailwindcss"></a>Tailwindcss</h2><ul>
<li><a target="_blank" rel="noopener" href="https://tailwindcss.com/">tailwindcss</a> 实用程序优先的CSS框架，用于快速UI开发。</li>
</ul>
<h2 id="Materializecss"><a href="#Materializecss" class="headerlink" title="Materializecss"></a>Materializecss</h2><ul>
<li><a target="_blank" rel="noopener" href="https://materializecss.com/">materializecss</a></li>
<li>Materialize，一个基于Material Design的CSS框架</li>
</ul>
<h2 id="Bootstrap"><a href="#Bootstrap" class="headerlink" title="Bootstrap"></a>Bootstrap</h2><ul>
<li><a target="_blank" rel="noopener" href="https://getbootstrap.com/">bootstrap</a></li>
<li>最受欢迎的HTML，CSS和JavaScript框架，用于在网络上开发响应式，移动优先项目。</li>
</ul>
<h2 id="Postcss"><a href="#Postcss" class="headerlink" title="Postcss"></a>Postcss</h2><ul>
<li><a target="_blank" rel="noopener" href="https://postcss.org/">postcss</a></li>
<li>PostCSS是使用JS插件转换样式的工具。这些插件可以使您的CSS更加整洁，支持变量和混合，可以转换将来的CSS语法，内联图像等等。</li>
<li>PostCSS接收一个CSS文件，并提供一个API来分析和修改其规则（通过将其转换为<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Abstract_syntax_tree">Abstract Syntax Tree</a>）。然后，<a target="_blank" rel="noopener" href="https://github.com/postcss/postcss#plugins">插件</a>可以使用此API进行许多有用的操作，例如自动查找错误或插入供应商前缀。</li>
</ul>
<h1 id="Javscript"><a href="#Javscript" class="headerlink" title="Javscript"></a>Javscript</h1><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/jobbole/awesome-javascript-cn">awesome-javascript-cn</a> JavaScript 资源大全中文版，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎等</li>
<li><a target="_blank" rel="noopener" href="https://github.com/sorrycc/awesome-javascript">awesome-javascript</a> 很棒的浏览器端JavaScript库，资源和闪亮的东西的集合。</li>
<li><a target="_blank" rel="noopener" href="https://standardjs.com/">standardjs</a> JavaScript样式指南，带有linter和自动代码修复程序</li>
<li><a target="_blank" rel="noopener" href="https://github.com/getify/You-Dont-Know-JS">You-Dont-Know-JS</a> 有关JavaScript的书籍系列。<a target="_blank" rel="noopener" href="https://github.com/YDKJS">@YDKJS</a>在Twitter上。</li>
</ul>
<h2 id="TodoMVC"><a href="#TodoMVC" class="headerlink" title="TodoMVC"></a>TodoMVC</h2><ul>
<li><a target="_blank" rel="noopener" href="http://todomvc.com/">todomvc</a> 帮助您选择MV *框架-适用于React.js，Ember.js，Angular等的Todo应用程序</li>
</ul>
<h2 id="date-fns"><a href="#date-fns" class="headerlink" title="date-fns"></a>date-fns</h2><ul>
<li><a target="_blank" rel="noopener" href="https://date-fns.org/">date-fns</a> 现代JavaScript日期实用程序库</li>
</ul>
<h2 id="函数库"><a href="#函数库" class="headerlink" title="函数库"></a>函数库</h2><h3 id="Underscore-amp-Lodash"><a href="#Underscore-amp-Lodash" class="headerlink" title="Underscore &amp; Lodash"></a>Underscore &amp; Lodash</h3><ul>
<li><a target="_blank" rel="noopener" href="https://lodash.com/">lodash</a></li>
<li><a target="_blank" rel="noopener" href="https://underscorejs.org/">underscore</a></li>
<li>现代化的JavaScript实用程序库，提供模块化，性能和附加功能。</li>
</ul>
<h3 id="Ramda"><a href="#Ramda" class="headerlink" title="Ramda"></a>Ramda</h3><ul>
<li><a target="_blank" rel="noopener" href="https://ramdajs.com/">ramdajs</a> 实用的功能性Javascript</li>
</ul>
<h3 id="Moment"><a href="#Moment" class="headerlink" title="Moment"></a>Moment</h3><ul>
<li><a target="_blank" rel="noopener" href="http://momentjs.com/">momentjs</a> 用javascript解析，验证，操作和显示日期。</li>
</ul>
<h3 id="day-js"><a href="#day-js" class="headerlink" title="day.js"></a>day.js</h3><ul>
<li><a target="_blank" rel="noopener" href="https://day.js.org/">day.js</a> 具有相同现代API的Day.js 2KB不可变日期时间库替代Moment.js</li>
</ul>
<h3 id="Mathjs"><a href="#Mathjs" class="headerlink" title="Mathjs"></a>Mathjs</h3><ul>
<li><a target="_blank" rel="noopener" href="https://mathjs.org/">mathjs</a> 广泛的JavaScript和Node.js数学库</li>
</ul>
<h3 id="Polish"><a href="#Polish" class="headerlink" title="Polish"></a>Polish</h3><ul>
<li><a target="_blank" rel="noopener" href="https://polished.js.org/">polish.js</a> 用于编写JavaScript样式的轻量级工具集</li>
</ul>
<h3 id="Chance"><a href="#Chance" class="headerlink" title="Chance"></a>Chance</h3><ul>
<li><a target="_blank" rel="noopener" href="http://chancejs.com/">chancejs</a> JavaScript的随机生成器帮助器</li>
</ul>
<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><h2 id="Httpie"><a href="#Httpie" class="headerlink" title="Httpie"></a>Httpie</h2><ul>
<li><a target="_blank" rel="noopener" href="https://httpie.io/">httpie</a> 就像/ aitch-tee-tee-pie / 🥧适用于API时代的现代，用户友好的命令行HTTP客户端。JSON支持，颜色，会话，下载，插件等。</li>
</ul>
<h2 id="Netdata"><a href="#Netdata" class="headerlink" title="Netdata"></a>Netdata</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.netdata.cloud/">netdata</a> 实时性能监控</li>
</ul>
<h2 id="Axios"><a href="#Axios" class="headerlink" title="Axios"></a>Axios</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/axios/axios">axios</a> 基于Promise的HTTP客户端，用于浏览器和node.js</li>
</ul>
<h2 id="json-server"><a href="#json-server" class="headerlink" title="json-server"></a>json-server</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/typicode/json-server">json-server</a> 在不到30秒的时间内（严重）获得具有零编码的完整假REST API</li>
</ul>
<h1 id="Svelte"><a href="#Svelte" class="headerlink" title="Svelte"></a>Svelte</h1><ul>
<li><a target="_blank" rel="noopener" href="https://svelte.dev/">svelte</a> 控制论增强的Web应用程序</li>
</ul>
<h1 id="Vite"><a href="#Vite" class="headerlink" title="Vite"></a>Vite</h1><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/vitejs/vite">vite</a> 由本机ESM驱动的Web开发构建工具。它很快。</li>
</ul>
<h1 id="Vue-js"><a href="#Vue-js" class="headerlink" title="Vue.js"></a>Vue.js</h1><ul>
<li><a target="_blank" rel="noopener" href="http://vuejs.org/">vuejs 官网</a> Vue.js是一个渐进的，可逐步采用的JavaScript框架，用于在Web上构建UI。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/vuejs/awesome-vue">awesome-vue</a> 与Vue.js相关的精彩内容精选清单</li>
<li><a target="_blank" rel="noopener" href="https://salomonelli.github.io/best-resume-ever">best-resume-ever</a> 快速建立 🚀轻松制作多张漂亮的简历，创造有史以来最好的简历！用Vue和LESS制成。<ul>
<li><a target="_blank" rel="noopener" href="https://vuejsexamples.com/">vue 案例</a> 众多 vue 组件库</li>
</ul>
</li>
</ul>
<h2 id="组件库"><a href="#组件库" class="headerlink" title="组件库"></a>组件库</h2><h3 id="Element"><a href="#Element" class="headerlink" title="Element"></a>Element</h3><ul>
<li><a target="_blank" rel="noopener" href="https://element.eleme.io/">element</a> 适用于Web的Vue.js 2.0 UI工具包</li>
</ul>
<h3 id="iView"><a href="#iView" class="headerlink" title="iView"></a>iView</h3><ul>
<li><a target="_blank" rel="noopener" href="http://iview.talkingdata.com/">iview</a> 基于Vue.js 2.0的高质量UI工具包</li>
</ul>
<h3 id="Vuetify"><a href="#Vuetify" class="headerlink" title="Vuetify"></a>Vuetify</h3><ul>
<li><a target="_blank" rel="noopener" href="https://vuetifyjs.com/">vuetifyjs</a> Vue的组件框架</li>
</ul>
<h3 id="Ant-Design-Vue"><a href="#Ant-Design-Vue" class="headerlink" title="Ant Design Vue"></a>Ant Design Vue</h3><ul>
<li><a target="_blank" rel="noopener" href="https://antdv.com/">antdv</a> 基于Ant Design和Vue的企业级UI组件。</li>
</ul>
<h3 id="Quasar-Framework"><a href="#Quasar-Framework" class="headerlink" title="Quasar Framework"></a>Quasar Framework</h3><ul>
<li><a target="_blank" rel="noopener" href="https://quasar.dev/">quasar</a> Quasar Framework-在创纪录的时间内构建高性能VueJS用户界面</li>
</ul>
<h2 id="Vue-Cli"><a href="#Vue-Cli" class="headerlink" title="Vue Cli"></a>Vue Cli</h2><ul>
<li><a target="_blank" rel="noopener" href="https://cli.vuejs.org/">vue cli</a> Vue.js开发的标准工具</li>
</ul>
<h2 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h2><ul>
<li><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/">vuex</a> Vue.js的集中状态管理。</li>
</ul>
<h2 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h2><ul>
<li><a target="_blank" rel="noopener" href="http://router.vuejs.org/">vue-router</a> Vue.js的官方路由器</li>
</ul>
<h2 id="Weex"><a href="#Weex" class="headerlink" title="Weex"></a>Weex</h2><ul>
<li><a target="_blank" rel="noopener" href="https://weex.apache.org/">weex</a> 用于构建移动跨平台UI的框架</li>
</ul>
<h2 id="Nuxt"><a href="#Nuxt" class="headerlink" title="Nuxt"></a>Nuxt</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nuxtjs.org/">nuxtjs</a> 直观的Vue框架</li>
</ul>
<h1 id="React"><a href="#React" class="headerlink" title="React"></a>React</h1><ul>
<li><a target="_blank" rel="noopener" href="https://reactjs.org/">reactjs</a> 用于构建用户界面的声明性，高效且灵活的JavaScript库。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/enaqx/awesome-react">awesome-react</a> 关于React生态系统的很棒的东西的集合</li>
</ul>
<h2 id="组件库-1"><a href="#组件库-1" class="headerlink" title="组件库"></a>组件库</h2><h3 id="Ant-Design"><a href="#Ant-Design" class="headerlink" title="Ant Design"></a>Ant Design</h3><ul>
<li><a target="_blank" rel="noopener" href="https://ant.design/">ant.design</a> UI设计语言和React UI库</li>
</ul>
<h3 id="Bulma"><a href="#Bulma" class="headerlink" title="Bulma"></a>Bulma</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/jgthms/bulma">bulma</a> 基于Flexbox的现代CSS框架</li>
</ul>
<h3 id="Material-UI"><a href="#Material-UI" class="headerlink" title="Material UI"></a>Material UI</h3><ul>
<li><a target="_blank" rel="noopener" href="https://material-ui.com/zh/">material-ui</a> 使用React组件进行更快，更简单的Web开发。建立自己的设计系统，或从材料设计开始。</li>
</ul>
<h3 id="Semantic-UI"><a href="#Semantic-UI" class="headerlink" title="Semantic UI"></a>Semantic UI</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/Semantic-Org/Semantic-UI">Semantic-UI</a> 语义是一个基于自然语言的有用原理的UI组件框架。</li>
</ul>
<h3 id="Chakra-UI"><a href="#Chakra-UI" class="headerlink" title="Chakra UI"></a>Chakra UI</h3><ul>
<li><a target="_blank" rel="noopener" href="https://chakra-ui.com/">chakra-ui</a> 适用于您的React应用程序的简单，模块化和可访问的UI组件</li>
</ul>
<h3 id="React-Bootstrap"><a href="#React-Bootstrap" class="headerlink" title="React Bootstrap"></a>React Bootstrap</h3><ul>
<li><a target="_blank" rel="noopener" href="https://react-bootstrap.github.io/">react-bootstrap</a></li>
</ul>
<h2 id="工具库"><a href="#工具库" class="headerlink" title="工具库"></a>工具库</h2><h3 id="Reactvirtualized"><a href="#Reactvirtualized" class="headerlink" title="Reactvirtualized"></a>Reactvirtualized</h3><ul>
<li><a target="_blank" rel="noopener" href="http://www.reactvirtualized.com/">reactvirtualized</a> React组件可有效呈现大型列表和表格数据</li>
</ul>
<h3 id="React-Select"><a href="#React-Select" class="headerlink" title="React Select"></a>React Select</h3><ul>
<li><a target="_blank" rel="noopener" href="https://react-select.com/">react-select</a> React.js的Select组件</li>
</ul>
<h3 id="React-Beautiful-DND"><a href="#React-Beautiful-DND" class="headerlink" title="React Beautiful DND"></a>React Beautiful DND</h3><ul>
<li><a target="_blank" rel="noopener" href="https://react-beautiful-dnd.netlify.com/">react-beautiful-dnd</a> 使用React轻松美观地拖放列表</li>
</ul>
<h2 id="React-Chrono"><a href="#React-Chrono" class="headerlink" title="React Chrono"></a>React Chrono</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/prabhuignoto/react-chrono">react-chrono</a> React的现代时间轴组件</li>
</ul>
<h2 id="Swr"><a href="#Swr" class="headerlink" title="Swr"></a>Swr</h2><ul>
<li><a target="_blank" rel="noopener" href="https://swr.vercel.app/">swr</a> React Hooks库用于远程数据获取</li>
</ul>
<h2 id="React-Query"><a href="#React-Query" class="headerlink" title="React Query"></a>React Query</h2><ul>
<li><a target="_blank" rel="noopener" href="https://react-query.tanstack.com/">react-query</a> 在React中获取，缓存和更新异步数据的钩子</li>
</ul>
<h2 id="Redux"><a href="#Redux" class="headerlink" title="Redux"></a>Redux</h2><ul>
<li><a target="_blank" rel="noopener" href="https://redux.js.org/">redux</a></li>
<li>JavaScript应用程序的可预测状态容器</li>
</ul>
<h2 id="React-Router"><a href="#React-Router" class="headerlink" title="React Router"></a>React Router</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/ReactTraining/react-router">react-router</a> React的声明式路由</li>
</ul>
<h2 id="Create-React-App"><a href="#Create-React-App" class="headerlink" title="Create React App"></a>Create React App</h2><ul>
<li><a target="_blank" rel="noopener" href="https://create-react-app.dev/">create-react-app</a> 通过运行一个命令来设置现代Web应用程序。</li>
</ul>
<h2 id="Create-React-Native-App"><a href="#Create-React-Native-App" class="headerlink" title="Create React Native App"></a>Create React Native App</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/expo/create-react-native-app">create-react-native-app</a> 创建可在iOS，Android和Web上运行的React Native应用</li>
</ul>
<h2 id="Next-js"><a href="#Next-js" class="headerlink" title="Next.js"></a>Next.js</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nextjs.org/">nextjs</a> React框架</li>
</ul>
<h1 id="Deno"><a href="#Deno" class="headerlink" title="Deno"></a>Deno</h1><ul>
<li><a target="_blank" rel="noopener" href="https://deno.js.cn/">deno 社区</a></li>
<li><a target="_blank" rel="noopener" href="https://deno.land/">deno</a> 安全的JavaScript和TypeScript运行时</li>
</ul>
<h1 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h1><ul>
<li><a target="_blank" rel="noopener" href="https://nodejs.org/en/">node</a> Node.js JavaScript运行时</li>
</ul>
<h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/alsotang/node-lessons">node-lessons</a> 《Node.js 包教不包会》</li>
<li><a target="_blank" rel="noopener" href="https://github.com/sindresorhus/awesome-nodejs">awesome-nodejs</a> 令人愉快的Node.js软件包和资源</li>
<li><a target="_blank" rel="noopener" href="https://twitter.com/nodepractices/">nodepractices</a> Node.js最佳实践列表（2020年12月）</li>
<li><a target="_blank" rel="noopener" href="https://cnodejs.org/">cnode</a> Node 社区</li>
</ul>
<h2 id="工具集"><a href="#工具集" class="headerlink" title="工具集"></a>工具集</h2><h3 id="nodemon"><a href="#nodemon" class="headerlink" title="nodemon"></a>nodemon</h3><ul>
<li><a target="_blank" rel="noopener" href="https://nodemon.io/">nodemon</a> 监视node.js应用程序中的任何更改并自动重启服务器-非常适合开发</li>
</ul>
<h3 id="pm2"><a href="#pm2" class="headerlink" title="pm2"></a>pm2</h3><ul>
<li><a target="_blank" rel="noopener" href="https://pm2.io/">pm2</a> 带有内置负载均衡器的Node.js Production Process Manager。</li>
</ul>
<h3 id="…"><a href="#…" class="headerlink" title="…"></a>…</h3><h2 id="AdminBro"><a href="#AdminBro" class="headerlink" title="AdminBro"></a>AdminBro</h2><ul>
<li><a target="_blank" rel="noopener" href="http://adminbro.com/">AdminBro</a>是一个用node.js编写的应用程序的管理面板</li>
</ul>
<h2 id="Cote"><a href="#Cote" class="headerlink" title="Cote"></a>Cote</h2><ul>
<li><a target="_blank" rel="noopener" href="http://cote.js.org/">cote.js</a> 用于构建零配置微服务的Node.js库。</li>
</ul>
<h2 id="Socket-io"><a href="#Socket-io" class="headerlink" title="Socket.io"></a>Socket.io</h2><ul>
<li><a target="_blank" rel="noopener" href="http://socket.io/">socket.io</a> 实时应用程序框架（Node.JS服务器）</li>
</ul>
<h2 id="Nw"><a href="#Nw" class="headerlink" title="Nw"></a>Nw</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nwjs.io/">nwjs</a> 直接从DOM / WebWorker调用所有Node.js模块，并启用一种使用所有Web技术编写应用程序的新方式。</li>
</ul>
<h2 id="Straip"><a href="#Straip" class="headerlink" title="Straip"></a>Straip</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/strapi/strapi">strapi</a> 开源Node.js Headless CMS可轻松构建可定制的API</li>
</ul>
<h2 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h2><ul>
<li><a target="_blank" rel="noopener" href="https://expressjs.com/">express</a> 快速，简单，极简的Node Web框架。</li>
</ul>
<h2 id="Koa"><a href="#Koa" class="headerlink" title="Koa"></a>Koa</h2><ul>
<li><a target="_blank" rel="noopener" href="https://koajs.com/">koa</a> 使用ES2017异步函数的node.js的表达中间件</li>
</ul>
<h2 id="egg"><a href="#egg" class="headerlink" title="egg"></a>egg</h2><ul>
<li><a target="_blank" rel="noopener" href="https://eggjs.org/">eggjs</a> 为使用Node.js和Koa构建更好的企业框架和应用而生</li>
</ul>
<h2 id="Adonis"><a href="#Adonis" class="headerlink" title="Adonis"></a>Adonis</h2><ul>
<li><a target="_blank" rel="noopener" href="https://preview.adonisjs.com/">adonisjs</a> Node.js框架高度关注开发人员的人机工程学，稳定性和信心</li>
</ul>
<h2 id="Nest"><a href="#Nest" class="headerlink" title="Nest"></a>Nest</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nestjs.com/">nest</a></li>
<li>一个渐进式的Node.js框架，用于在TypeScript和JavaScript（ES6，ES7，ES8）之上构建高效，可伸缩的企业级服务器端应用程序</li>
</ul>
<h2 id="Next"><a href="#Next" class="headerlink" title="Next"></a>Next</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nextjs.org/">nextjs</a> React框架</li>
</ul>
<h2 id="Nuxt-1"><a href="#Nuxt-1" class="headerlink" title="Nuxt"></a>Nuxt</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nuxtjs.org/">nuxtjs</a> 直观的Vue框架</li>
</ul>
<h2 id="Electron"><a href="#Electron" class="headerlink" title="Electron"></a>Electron</h2><ul>
<li><a target="_blank" rel="noopener" href="https://electronjs.org/">electronicjs</a></li>
<li>Electron框架使您可以使用JavaScript，HTML和CSS编写跨平台的桌面应用程序。它基于<a target="_blank" rel="noopener" href="https://nodejs.org/">Node.js</a>和<a target="_blank" rel="noopener" href="https://www.chromium.org/">Chromium，</a>并且被<a target="_blank" rel="noopener" href="https://github.com/atom/atom">Atom编辑器</a>、<a target="_blank" rel="noopener" href="https://code.visualstudio.com/">VSCode</a>和许多其他<a target="_blank" rel="noopener" href="https://electronjs.org/apps">应用程序使用</a>。</li>
</ul>
<h2 id="puppeteer"><a href="#puppeteer" class="headerlink" title="puppeteer"></a>puppeteer</h2><ul>
<li><a target="_blank" rel="noopener" href="https://pptr.dev/">puppeteer</a></li>
</ul>
<blockquote>
<p>Puppeteer是一个Node库，它提供了高级API来通过<a target="_blank" rel="noopener" href="https://chromedevtools.github.io/devtools-protocol/">DevTools协议</a>控制Chrome或Chromium 。Puppeteer默认情况下<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2017/04/headless-chrome">无头</a>运行，但可以配置为运行完整（无头）的Chrome或Chromium。</p>
</blockquote>
<h1 id="富文本编辑器、代码编辑器"><a href="#富文本编辑器、代码编辑器" class="headerlink" title="富文本编辑器、代码编辑器"></a>富文本编辑器、代码编辑器</h1><h2 id="富文本编辑器"><a href="#富文本编辑器" class="headerlink" title="富文本编辑器"></a>富文本编辑器</h2><h3 id="Simditor"><a href="#Simditor" class="headerlink" title="Simditor"></a>Simditor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://simditor.tower.im/">simditor</a> 便捷的所见即所得编辑器</li>
</ul>
<h3 id="tui-editor"><a href="#tui-editor" class="headerlink" title="tui.editor"></a>tui.editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/nhn/tui.editor">tui.editor</a> Markdown所见即所得编辑器。GFM标准+图表和UML可扩展</li>
</ul>
<h3 id="Quill"><a href="#Quill" class="headerlink" title="Quill"></a>Quill</h3><ul>
<li><a target="_blank" rel="noopener" href="https://quilljs.com/">quilljs</a> Quill是一种现代的WYSIWYG编辑器，旨在实现兼容性和可扩展性。</li>
</ul>
<h3 id="Draft"><a href="#Draft" class="headerlink" title="Draft"></a>Draft</h3><ul>
<li><a target="_blank" rel="noopener" href="https://draftjs.org/">draftjs</a> 一个用于构建文本编辑器的React框架。</li>
</ul>
<h3 id="MavonEditor"><a href="#MavonEditor" class="headerlink" title="MavonEditor"></a>MavonEditor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/hinesboy/mavonEditor">mavonEditor</a> mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能</li>
</ul>
<h3 id="Tiptap"><a href="#Tiptap" class="headerlink" title="Tiptap"></a>Tiptap</h3><ul>
<li><a target="_blank" rel="noopener" href="https://tiptap.dev/">tiptap</a> Vue.js的无渲染富文本编辑器</li>
</ul>
<h3 id="Vue-Quill-Editor"><a href="#Vue-Quill-Editor" class="headerlink" title="Vue Quill Editor"></a>Vue Quill Editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/surmon-china/vue-quill-editor">vue-quill-editor</a> <a target="_blank" rel="noopener" href="https://github.com/quilljs">@quilljs</a>的编辑器组件<a target="_blank" rel="noopener" href="https://github.com/vuejs">@vuejs</a></li>
</ul>
<h3 id="Tinymce"><a href="#Tinymce" class="headerlink" title="Tinymce"></a>Tinymce</h3><ul>
<li><a target="_blank" rel="noopener" href="https://www.tiny.cloud/">tinymce</a></li>
<li>TinyMCE是世界上最受欢迎的基于Web的开源WYSIWYG编辑器。用于富文本编辑。适用于React，Vue和Angular</li>
</ul>
<h3 id="Simplemde"><a href="#Simplemde" class="headerlink" title="Simplemde"></a>Simplemde</h3><ul>
<li><a target="_blank" rel="noopener" href="https://simplemde.com/">simplemde</a></li>
<li>一个简单，美观，可嵌入的JavaScript Markdown编辑器。无论是初学者还是专家，都可轻松编辑。具有内置的自动保存和拼写检查功能。</li>
</ul>
<h3 id="Simplemde-Markdown-Editor"><a href="#Simplemde-Markdown-Editor" class="headerlink" title="Simplemde Markdown Editor"></a>Simplemde Markdown Editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/sparksuite/simplemde-markdown-editor">simplemde-markdown-editor</a></li>
<li>一个简单，美观，可嵌入的JavaScript Markdown编辑器。不论是初学者还是专家，都可轻松编辑。具有内置的自动保存和拼写检查功能。</li>
</ul>
<h3 id="Editor"><a href="#Editor" class="headerlink" title="Editor"></a>Editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/codex-team/editor.js">editor.js</a> 具有干净JSON输出的块样式编辑器</li>
</ul>
<h3 id="Medium-Editor"><a href="#Medium-Editor" class="headerlink" title="Medium Editor"></a>Medium Editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://yabwe.github.io/medium-editor/">medium-editor</a> Medium.com所见即所得的编辑器克隆。使用contenteditable API来实现RTF解决方案。</li>
</ul>
<h2 id="代码编辑器"><a href="#代码编辑器" class="headerlink" title="代码编辑器"></a>代码编辑器</h2><h3 id="CodeMirror"><a href="#CodeMirror" class="headerlink" title="CodeMirror"></a>CodeMirror</h3><ul>
<li><a target="_blank" rel="noopener" href="http://codemirror.net/">codemirror</a> 浏览器内代码编辑器</li>
</ul>
<h3 id="Monaco-Editor"><a href="#Monaco-Editor" class="headerlink" title="Monaco Editor"></a>Monaco Editor</h3><ul>
<li><a target="_blank" rel="noopener" href="https://microsoft.github.io/monaco-editor/">monaco-editor</a> 基于浏览器的代码编辑器</li>
</ul>
<h1 id="UI-色彩搭配"><a href="#UI-色彩搭配" class="headerlink" title="UI 色彩搭配"></a>UI 色彩搭配</h1><ul>
<li><a target="_blank" rel="noopener" href="https://www.bootcss.com/p/websafecolors/">web 安全色</a></li>
<li><a target="_blank" rel="noopener" href="https://color.adobe.com/zh/create/color-wheel">Adobe Color</a></li>
<li><a target="_blank" rel="noopener" href="http://zhongguose.com/">中国色</a></li>
<li><a target="_blank" rel="noopener" href="https://uigradients.com/#RedSunset">uigradients</a></li>
<li><a target="_blank" rel="noopener" href="https://www.palettable.io/6B8539">palettable</a> 利用数百万设计师的知识生成漂亮的调色板。</li>
<li><a target="_blank" rel="noopener" href="https://colorsupplyyy.com/">colorsupplyyy</a> 设计师和插画家的选色器</li>
<li><a target="_blank" rel="noopener" href="https://webgradients.com/">webgradients</a> 是180个线性渐变的免费集合，您可以将其用作网站任何部分的内容背景。轻松复制CSS3跨浏览器代码</li>
<li><a target="_blank" rel="noopener" href="http://zhongguose.com/">colrd</a> 创造色彩灵感并与世界分享。</li>
<li><a target="_blank" rel="noopener" href="http://tool.c7sky.com/webcolor/">配色表</a> 网页设计常用色彩搭配表</li>
</ul>
<h1 id="后台管理项目"><a href="#后台管理项目" class="headerlink" title="后台管理项目"></a>后台管理项目</h1><h2 id="Vue-Element-Admin"><a href="#Vue-Element-Admin" class="headerlink" title="Vue-Element-Admin"></a>Vue-Element-Admin</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/PanJiaChen/vue-element-admin">vue-element-admin</a> 是一个后台前端解决方案，它基于 vue 和 element-ui实现。</li>
</ul>
<h2 id="iview-admin"><a href="#iview-admin" class="headerlink" title="iview-admin"></a>iview-admin</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/iview/iview-admin">iView Admin</a> 是基于 Vue.js，搭配使用<a target="_blank" rel="noopener" href="https://github.com/iview/iview">iView UI</a> 组件库形成的一套后台集成解决方案，由 TalkingData 前端可视化团队部分成员开发维护。</li>
</ul>
<h2 id="ant-design-pro"><a href="#ant-design-pro" class="headerlink" title="ant-design-pro"></a>ant-design-pro</h2><ul>
<li><a target="_blank" rel="noopener" href="http://pro.ant.design/">ant-design-pro</a> 像专业人士一样使用Ant Design！</li>
<li>开箱即用的中台前端 / 设计解决方案。</li>
</ul>
<h2 id="vue-admin-beautiful"><a href="#vue-admin-beautiful" class="headerlink" title="vue-admin-beautiful"></a>vue-admin-beautiful</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/chuzhixin/vue-admin-beautiful">vue-admin-beautiful</a></li>
<li>vue3，vue3.0，vue，vue3.x，vue.js，后台管理，管理员，vue-admin，vue-element-admin，主线版本基于element-plus，element-ui，ant-design-vue三者并行开发维护，同时支持电脑，手机，平板，切换分区查看不同的vue版本，element-plus版本已发布（vue3，vue3.0，vue，vue3.x，vue.js）</li>
</ul>
<h2 id="antd-admin"><a href="#antd-admin" class="headerlink" title="antd-admin"></a>antd-admin</h2><p><a target="_blank" rel="noopener" href="https://github.com/zuiidea/antd-admin">antd-admin</a> 基于Ant Design和UmiJS的企业应用程序的出色前端解决方案</p>
<h2 id="AdminLTE"><a href="#AdminLTE" class="headerlink" title="AdminLTE"></a>AdminLTE</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/almasaeed2010/AdminLTE"><strong>AdminLTE</strong></a> AdminLTE-基于Bootstrap 4的免费管理仪表板模板</li>
</ul>
<h2 id="Tabler"><a href="#Tabler" class="headerlink" title="Tabler"></a>Tabler</h2><ul>
<li><a target="_blank" rel="noopener" href="https://tabler.io/">tabler</a> Tabler是免费的开源Bootstrap构建的HTML Dashboard UI套件</li>
</ul>
<h1 id="GIS-和-BIM"><a href="#GIS-和-BIM" class="headerlink" title="GIS 和 BIM"></a>GIS 和 BIM</h1><ul>
<li><a target="_blank" rel="noopener" href="http://www.tuituisoft.com/bim/7788.html">BIM+GIS是什么？BIM+定位系统能干嘛？</a></li>
<li>地理信息系统（GIS）是用来管理地理空间分布数据的计算机信息系统。</li>
</ul>
<h2 id="cesium"><a href="#cesium" class="headerlink" title="cesium"></a>cesium</h2><ul>
<li><a target="_blank" rel="noopener" href="https://cesium.com/cesiumjs/">Cesium 官网</a></li>
<li><a target="_blank" rel="noopener" href="https://www.cesium.com/">Cesium</a> 是三维地理可视化的常用库，在大尺度的可视化（地形、建筑、地球）中十分常用。</li>
</ul>
<h2 id="Leaflet"><a href="#Leaflet" class="headerlink" title="Leaflet"></a>Leaflet</h2><ul>
<li><a target="_blank" rel="noopener" href="https://leafletjs.com/">Leaflet</a> 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。</li>
<li>适用于移动设备的交互式地图的JavaScript库</li>
</ul>
<h2 id="mapbox"><a href="#mapbox" class="headerlink" title="mapbox"></a>mapbox</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.mapbox.com/">mapbox 官网</a></li>
<li><a target="_blank" rel="noopener" href="http://www.mapbox.cn/mapbox-gl-js/overview/">Mapbox GL JS</a> 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。</li>
<li><a target="_blank" rel="noopener" href="https://docs.mapbox.com/mapbox.js/api/v3.3.1/">Mapbox.js</a> 是 Leaflet 的一个扩展插件（与 Mapbox GL JS 不同）。</li>
</ul>
<h2 id="ArcGIS"><a href="#ArcGIS" class="headerlink" title="ArcGIS"></a>ArcGIS</h2><ul>
<li><a target="_blank" rel="noopener" href="https://developers.arcgis.com/javascript/">ArcGIS API for JS</a> 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。它不开源且收费不低，在学术场景下较为常用。</li>
</ul>
<h2 id="Openlayers"><a href="#Openlayers" class="headerlink" title="Openlayers"></a>Openlayers</h2><ul>
<li><a target="_blank" rel="noopener" href="https://openlayers.org/">Openlayers</a> 也是常用的前端地图库，它开源，相比于Leaflet更加复杂和完备。</li>
</ul>
<h2 id="百度地图-JS-百度地图-GL"><a href="#百度地图-JS-百度地图-GL" class="headerlink" title="百度地图 JS /百度地图 GL"></a>百度地图 JS /百度地图 GL</h2><ul>
<li><a target="_blank" rel="noopener" href="http://lbsyun.baidu.com/index.php?title=jspopular3.0">百度地图 JS API</a> 是传统的二维地图，<a target="_blank" rel="noopener" href="http://lbsyun.baidu.com/index.php?title=jspopularGL">百度地图 API GL</a> 是三维地图，它们依赖百度地图提供的后台服务。除了地图服务外还有检索、导航、实时交通等关联服务。开发者有免费的限额。</li>
</ul>
<h2 id="高德地图-JS"><a href="#高德地图-JS" class="headerlink" title="高德地图 JS"></a>高德地图 JS</h2><ul>
<li><a target="_blank" rel="noopener" href="https://lbs.amap.com/api/javascript-api/summary">高德地图 JS API</a> 与百度类似。</li>
</ul>
<h2 id="Google-Maps-JS"><a href="#Google-Maps-JS" class="headerlink" title="Google Maps JS"></a>Google Maps JS</h2><ul>
<li><a target="_blank" rel="noopener" href="https://developers.google.com/maps/documentation/javascript/overview">谷歌地图 JS API</a> 在境外有更好的数据。</li>
</ul>
<h2 id="AntV-L7"><a href="#AntV-L7" class="headerlink" title="AntV L7"></a>AntV L7</h2><ul>
<li><a target="_blank" rel="noopener" href="https://antv.vision/zh">AntV L7</a> 是空间数据可视化库，它可以使用高德地图等协作构建地图可视化。</li>
</ul>
<h1 id="团队"><a href="#团队" class="headerlink" title="团队"></a>团队</h1><h2 id="GIT"><a href="#GIT" class="headerlink" title="GIT"></a>GIT</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/pcottle/learnGitBranching">learnGitBranching</a> 交互式的git可视化挑战和教育！</li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg==&mid=2247487096&idx=1&sn=fa444748979f03271e2a9c15b2ed9749&source=41#wechat_redirect">Git使用教程：最详细、最傻瓜、最浅显、真正手把手教！</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6869519303864123399">「一劳永逸」一张脑图带你掌握Git命令</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903598522908686">git基本操作，一篇文章就够了！</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903546104135694">如何优雅地使用 Git</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903607976853512">VSCode 中使用Git实践，学会了效率翻倍</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903699915997192">超详实Git简明教程与命令大全</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903606815064077">优雅的提交你的 Git Commit Message</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903971069362190#heading-19">高频使用的 Git 命令</a></li>
</ul>
<h3 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h3><ul>
<li><a target="_blank" rel="noopener" href="https://typicode.github.io/husky/#/">husky</a></li>
<li>Git钩子变得容易 🐶 纬！预提交钩子</li>
</ul>
<h3 id="Pre-Commit"><a href="#Pre-Commit" class="headerlink" title="Pre Commit"></a>Pre Commit</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/observing/pre-commit">pre-commit</a></li>
<li>自动在您的git储存库中安装git pre-commit脚本，该脚本在pre-commit上运行您的 <code>npm test</code></li>
</ul>
<h3 id="lint-staged"><a href="#lint-staged" class="headerlink" title="lint-staged"></a>lint-staged</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/okonet/lint-staged">lint-staged</a> 在git暂存文件上运行linters</li>
</ul>
<h2 id="Plop"><a href="#Plop" class="headerlink" title="Plop"></a>Plop</h2><ul>
<li>一致性变得简单</li>
<li><a target="_blank" rel="noopener" href="https://plopjs.com/">Plop</a>是一个小工具，可以节省您的时间并帮助您的团队以一致的方式构建新文件。</li>
</ul>
<h2 id="hyper"><a href="#hyper" class="headerlink" title="hyper"></a>hyper</h2><ul>
<li><a target="_blank" rel="noopener" href="https://hyper.is/">hyper</a> 基于Web技术的终端</li>
</ul>
<h2 id="Rocket-Chat"><a href="#Rocket-Chat" class="headerlink" title="Rocket.Chat"></a>Rocket.Chat</h2><ul>
<li><a target="_blank" rel="noopener" href="https://rocket.chat/">rocket.chat/</a> 团队沟通的终极免费开源解决方案。</li>
</ul>
<h1 id="静态网站生成器"><a href="#静态网站生成器" class="headerlink" title="静态网站生成器"></a>静态网站生成器</h1><ul>
<li>静态网站生成器（SSG，Static Site Generator）是指能够生成一堆 HTML、CSS、JS 文件，方便你快速部署到 WEB 服务器上而不需要安装和配置数据库的工具。</li>
<li>静态网站具有速度快，稳定且易于维护的特点。</li>
</ul>
<h2 id="Gatsby"><a href="#Gatsby" class="headerlink" title="Gatsby"></a>Gatsby</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.gatsbyjs.com/">Gatsby</a> 使用React构建快速、现代化的应用程序和网站</li>
</ul>
<h2 id="react-static"><a href="#react-static" class="headerlink" title="react-static"></a>react-static</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/react-static/react-static">react-static</a> 一个用于React的渐进式静态站点生成器。</li>
</ul>
<h2 id="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a>Hexo</h2><ul>
<li><a target="_blank" rel="noopener" href="https://hexo.io/">hexo</a> 由Node.js提供支持的快速、简单且功能强大的博客框架。</li>
</ul>
<h2 id="VuePress"><a href="#VuePress" class="headerlink" title="VuePress"></a>VuePress</h2><ul>
<li><a target="_blank" rel="noopener" href="https://vuepress.vuejs.org/">VuePress</a> 📝 简约的Vue供电的静态网站生成器</li>
</ul>
<h2 id="Docusaurus"><a href="#Docusaurus" class="headerlink" title="Docusaurus"></a>Docusaurus</h2><ul>
<li><a target="_blank" rel="noopener" href="https://docusaurus.io/">docusaurus</a> 易于维护的开源文档网站。</li>
</ul>
<h2 id="Docsify"><a href="#Docsify" class="headerlink" title="Docsify"></a>Docsify</h2><ul>
<li><a target="_blank" rel="noopener" href="https://docsify.js.org/">docsify</a> 一个神奇的文档站点生成器。</li>
</ul>
<h1 id="API-开发工具"><a href="#API-开发工具" class="headerlink" title="API 开发工具"></a>API 开发工具</h1><h2 id="Hoppscotch"><a href="#Hoppscotch" class="headerlink" title="Hoppscotch"></a>Hoppscotch</h2><ul>
<li><a target="_blank" rel="noopener" href="https://hoppscotch.io/">hoppscotch</a></li>
<li>一个免费，快速，美观的API请求构建器，供10万多个开发人员使用。</li>
<li>Hoppscotch 其实是 Postwoman，是基于nodejs写的，主要特点除了可以支持主流的Restful接口调试之外，还支持 GraphQL和 WebSocket。</li>
</ul>
<h2 id="Postman"><a href="#Postman" class="headerlink" title="Postman"></a>Postman</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.postman.com/">postman</a></li>
<li>Postman是用于API开发的协作平台。Postman的功能简化了构建API的每个步骤并简化了协作，因此您可以更快地创建更好的API。</li>
</ul>
<h1 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h1><h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><ul>
<li><a target="_blank" rel="noopener" href="https://eslint.org/">ESLint</a> 查找并修复JavaScript代码中的问题。</li>
</ul>
<h2 id="Prettier"><a href="#Prettier" class="headerlink" title="Prettier"></a>Prettier</h2><ul>
<li><a target="_blank" rel="noopener" href="https://prettier.io/">Prettier</a> 是一个自以为是的代码格式化程序。</li>
</ul>
<h1 id="构建工具：Build-Tools"><a href="#构建工具：Build-Tools" class="headerlink" title="构建工具：Build Tools"></a>构建工具：Build Tools</h1><h2 id="Parcel"><a href="#Parcel" class="headerlink" title="Parcel"></a>Parcel</h2><ul>
<li><a target="_blank" rel="noopener" href="https://parceljs.org/">parcel</a> 快速，零配置的Web应用程序捆绑程序</li>
<li><a target="_blank" rel="noopener" href="https://parceljs.org/">Parcel</a> 不仅提供现代前端开发所需的各种功能，还有个碾压性的优势：零配置！这是它与依靠大量 “loaders” 的 <a target="_blank" rel="noopener" href="https://webpack.js.org/">Webpack</a> 最大区别。</li>
</ul>
<h2 id="Webpack"><a href="#Webpack" class="headerlink" title="Webpack"></a>Webpack</h2><ul>
<li><a target="_blank" rel="noopener" href="https://webpack.js.org/">webpack</a></li>
<li>javascript和朋友的捆绑器。将许多模块打包到少数捆绑资产中。代码拆分允许按需加载应用程序的某些部分。通过”加载程序”，模块可以是CommonJs，AMD，ES6模块，CSS，图像，JSON，Coffeescript，LESS等。</li>
</ul>
<h2 id="Gulp"><a href="#Gulp" class="headerlink" title="Gulp"></a>Gulp</h2><ul>
<li><a target="_blank" rel="noopener" href="https://gulpjs.com/">gulp</a></li>
<li>自动化和增强您的工作流程的工具包</li>
</ul>
<h2 id="Rollup"><a href="#Rollup" class="headerlink" title="Rollup"></a>Rollup</h2><ul>
<li><a target="_blank" rel="noopener" href="https://rollupjs.org/">rollupjs</a></li>
<li>下一代ES模块捆绑器</li>
</ul>
<h1 id="测试框架"><a href="#测试框架" class="headerlink" title="测试框架"></a>测试框架</h1><h2 id="Jest"><a href="#Jest" class="headerlink" title="Jest"></a>Jest</h2><ul>
<li><a target="_blank" rel="noopener" href="https://jestjs.io/">jestjs</a></li>
<li>令人愉快的JavaScript测试。</li>
</ul>
<h2 id="AVA"><a href="#AVA" class="headerlink" title="AVA"></a>AVA</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/avajs/ava">ava</a></li>
<li>Node.js测试运行器，使您充满信心地进行开发</li>
</ul>
<h2 id="Cypress"><a href="#Cypress" class="headerlink" title="Cypress"></a>Cypress</h2><ul>
<li><a href="www.cypress.io">cypress</a> 对浏览器中运行的所有内容进行快速，轻松和可靠的测试。</li>
</ul>
<h2 id="Puppeteer"><a href="#Puppeteer" class="headerlink" title="Puppeteer"></a>Puppeteer</h2><ul>
<li><a target="_blank" rel="noopener" href="https://pptr.dev/">Puppeteer</a> 无头的Chrome Node.js API</li>
</ul>
<h1 id="IDE-和-编辑器"><a href="#IDE-和-编辑器" class="headerlink" title="IDE 和 编辑器"></a>IDE 和 编辑器</h1><blockquote>
<p>集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E7%BC%96%E8%AF%91%E5%99%A8/8853067">编译器</a>、<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E8%B0%83%E8%AF%95%E5%99%A8/3351943">调试器</a>和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E5%BE%AE%E8%BD%AF/124767">微软</a>的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。</p>
</blockquote>
<h2 id="VS-Code"><a href="#VS-Code" class="headerlink" title="VS Code"></a>VS Code</h2><ul>
<li><a target="_blank" rel="noopener" href="https://code.visualstudio.com/">vscode</a></li>
</ul>
<h2 id="Atom"><a href="#Atom" class="headerlink" title="Atom"></a>Atom</h2><ul>
<li><a target="_blank" rel="noopener" href="https://atom.io/">Atom</a></li>
<li>可破解文本编辑器</li>
</ul>
<h2 id="Sublime"><a href="#Sublime" class="headerlink" title="Sublime"></a>Sublime</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.sublimetext.com/">sublime</a></li>
<li>复杂的文本编辑器，用于代码，标记和散文</li>
</ul>
<h1 id="编译工具"><a href="#编译工具" class="headerlink" title="编译工具"></a>编译工具</h1><h2 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/">typescript</a> TypeScript是JavaScript的超集，可编译为干净的JavaScript输出。</li>
</ul>
<h2 id="Flow"><a href="#Flow" class="headerlink" title="Flow"></a>Flow</h2><ul>
<li><a target="_blank" rel="noopener" href="https://flow.org/">flow</a> 在JavaScript中添加静态类型，以提高开发人员的工作效率和代码质量。</li>
</ul>
<h2 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h2><ul>
<li><a target="_blank" rel="noopener" href="https://babel.dev/">babel</a> Babel是用于编写下一代JavaScript的编译器。</li>
</ul>
<h1 id="图标、字体库"><a href="#图标、字体库" class="headerlink" title="图标、字体库"></a>图标、字体库</h1><h2 id="图标库"><a href="#图标库" class="headerlink" title="图标库"></a>图标库</h2><h3 id="Iconfont"><a href="#Iconfont" class="headerlink" title="Iconfont"></a>Iconfont</h3><ul>
<li><a target="_blank" rel="noopener" href="https://www.iconfont.cn/">iconfont</a> 阿里巴巴矢量图标库</li>
</ul>
<h3 id="Material-Design-icons"><a href="#Material-Design-icons" class="headerlink" title="Material Design icons"></a>Material Design icons</h3><ul>
<li><a target="_blank" rel="noopener" href="https://www.materialpalette.com/icons">Material Design icons</a> Google的Material Design图标，其中还包含了颜色板预览</li>
</ul>
<h3 id="IcoMoon"><a href="#IcoMoon" class="headerlink" title="IcoMoon"></a>IcoMoon</h3><ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6876943860988772360">IcoMoon</a> 免费矢量图标</li>
</ul>
<h3 id="Orion"><a href="#Orion" class="headerlink" title="Orion"></a>Orion</h3><ul>
<li><a target="_blank" rel="noopener" href="https://orioniconlibrary.com/">Orion</a> 免费SVG矢量图标</li>
</ul>
<h3 id="Font-Awesome"><a href="#Font-Awesome" class="headerlink" title="Font Awesome"></a>Font Awesome</h3><ul>
<li><a target="_blank" rel="noopener" href="https://fontawesome.com/">fontawesome</a> 标志性的SVG，字体和CSS工具包</li>
</ul>
<h3 id="SuperTinyIcons"><a href="#SuperTinyIcons" class="headerlink" title="SuperTinyIcons"></a>SuperTinyIcons</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/edent/SuperTinyIcons">SuperTinyIcons</a> 每个1KB以下！Super Tiny Icons是您喜欢的网站和应用程序徽标的微型SVG版本</li>
</ul>
<h3 id="Feather"><a href="#Feather" class="headerlink" title="Feather"></a>Feather</h3><ul>
<li><a target="_blank" rel="noopener" href="https://feathericons.com/">feather</a> 简单漂亮的开源图标</li>
</ul>
<h3 id="Zondicons"><a href="#Zondicons" class="headerlink" title="Zondicons"></a>Zondicons</h3><ul>
<li><a target="_blank" rel="noopener" href="http://www.zondicons.com/">zondicons</a> 一组免费的高级SVG图标，供您在数字产品上使用</li>
</ul>
<h3 id="Ionicons"><a href="#Ionicons" class="headerlink" title="Ionicons"></a>Ionicons</h3><ul>
<li><a target="_blank" rel="noopener" href="http://ionicons.com/">ionicons</a> 由Ionic打造的高级手工制作图标，适用于世界各地的Ionic应用程序和Web应用程序</li>
</ul>
<h3 id="Maki"><a href="#Maki" class="headerlink" title="Maki"></a>Maki</h3><ul>
<li><a target="_blank" rel="noopener" href="https://labs.mapbox.com/maki-icons/">Maki</a> POI图标集</li>
<li>Maki是专为地图设计师设计的图标集。Maki包括 公园，博物馆和礼拜场所等常见景点的图标。每个图标都可用作SVG，有两种尺寸：11px x 11px和15px x 15px。</li>
</ul>
<h2 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h2><h3 id="Google-Fonts"><a href="#Google-Fonts" class="headerlink" title="Google Fonts"></a>Google Fonts</h3><ul>
<li><a target="_blank" rel="noopener" href="https://fonts.google.com/">Google 字体</a></li>
</ul>
<h3 id="Free-Fonts"><a href="#Free-Fonts" class="headerlink" title="Free Fonts"></a>Free Fonts</h3><ul>
<li><a target="_blank" rel="noopener" href="https://www.fontspace.com/">free font</a></li>
</ul>
<h1 id="CSS-动画库"><a href="#CSS-动画库" class="headerlink" title="CSS 动画库"></a>CSS 动画库</h1><ul>
<li>挑选的是一些近一年都在维护的动画库</li>
</ul>
<h2 id="Keyframes"><a href="#Keyframes" class="headerlink" title="Keyframes"></a>Keyframes</h2><ul>
<li><a target="_blank" rel="noopener" href="https://keyframes.app/">keyframes</a> 关键帧可帮助您编写更好的CSS</li>
</ul>
<h2 id="Spinkit"><a href="#Spinkit" class="headerlink" title="Spinkit"></a>Spinkit</h2><ul>
<li><a target="_blank" rel="noopener" href="https://tobiasahlin.com/spinkit/">spinkit</a> 用CSS制作动画的加载指示器的集合</li>
</ul>
<h2 id="Animate-css"><a href="#Animate-css" class="headerlink" title="Animate.css"></a>Animate.css</h2><ul>
<li><a target="_blank" rel="noopener" href="https://animate.style/">animate</a></li>
<li><strong>Animate.css</strong>是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，主页，滑块和引导注意的提示。</li>
</ul>
<h2 id="Anime"><a href="#Anime" class="headerlink" title="Anime"></a>Anime</h2><ul>
<li><a target="_blank" rel="noopener" href="https://animejs.com/">anime</a> JavaScript动画引擎</li>
</ul>
<h2 id="Svg"><a href="#Svg" class="headerlink" title="Svg"></a>Svg</h2><ul>
<li><a target="_blank" rel="noopener" href="http://svgjs.com/">svgjs</a> 用于操作和动画SVG的轻量级库</li>
</ul>
<h2 id="Snap"><a href="#Snap" class="headerlink" title="Snap"></a>Snap</h2><ul>
<li><a target="_blank" rel="noopener" href="http://snapsvg.io/">snapsvg</a> 用于现代SVG图形的JavaScript库。</li>
</ul>
<h2 id="Dynamics"><a href="#Dynamics" class="headerlink" title="Dynamics"></a>Dynamics</h2><ul>
<li><a target="_blank" rel="noopener" href="http://dynamicsjs.com/">dynamicsjs</a> Dynamics.js是一个JavaScript库，用于创建基于物理的动画</li>
</ul>
<h2 id="Three"><a href="#Three" class="headerlink" title="Three"></a>Three</h2><ul>
<li><a target="_blank" rel="noopener" href="https://threejs.org/">three.js</a> JavaScript 3D库</li>
</ul>
<h2 id="ScrollReveal"><a href="#ScrollReveal" class="headerlink" title="ScrollReveal"></a>ScrollReveal</h2><ul>
<li><a target="_blank" rel="noopener" href="https://scrollrevealjs.org/">scrollrevealjs</a> 在元素滚动到视图时对其进行动画处理。</li>
</ul>
<h2 id="GSAP"><a href="#GSAP" class="headerlink" title="GSAP"></a>GSAP</h2><ul>
<li><a target="_blank" rel="noopener" href="https://greensock.com/gsap/">GSAP</a> 适用于现代网络的专业级JavaScript动画</li>
</ul>
<h2 id="Magic"><a href="#Magic" class="headerlink" title="Magic"></a>Magic</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.minimamente.com/project/magic/">magic</a> 具有特殊效果的CSS3动画</li>
</ul>
<h2 id="Pixi"><a href="#Pixi" class="headerlink" title="Pixi"></a>Pixi</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/pixijs/pixi.js">pixi.js</a> HTML5创建引擎：使用最快，最灵活的2D WebGL渲染器创建精美的数字内容。</li>
</ul>
<h2 id="Tween"><a href="#Tween" class="headerlink" title="Tween"></a>Tween</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/tweenjs/tween.js">tween.js</a> JavaScript动画引擎</li>
</ul>
<h2 id="ScrollTrigger"><a href="#ScrollTrigger" class="headerlink" title="ScrollTrigger"></a>ScrollTrigger</h2><ul>
<li><a target="_blank" rel="noopener" href="https://terwanerik.github.io/ScrollTrigger/">ScrollTrigger</a> 让您的页面对滚动更改做出反应。</li>
</ul>
<h2 id="Parallax"><a href="#Parallax" class="headerlink" title="Parallax"></a>Parallax</h2><ul>
<li><a target="_blank" rel="noopener" href="http://wagerfield.github.io/parallax/">parallax</a></li>
<li>对智能设备的方向做出反应的视差引擎</li>
<li>挺好看的，但是很久没维护了</li>
</ul>
<h2 id="Matter"><a href="#Matter" class="headerlink" title="Matter"></a>Matter</h2><ul>
<li><a target="_blank" rel="noopener" href="https://brm.io/matter-js/#">Matter</a></li>
</ul>
<h1 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h1><h2 id="Uppy"><a href="#Uppy" class="headerlink" title="Uppy"></a>Uppy</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uppy.io/">uppy</a></li>
<li>Web浏览器的下一个开源文件上传器</li>
</ul>
<h2 id="FileSaver"><a href="#FileSaver" class="headerlink" title="FileSaver"></a>FileSaver</h2><ul>
<li><a target="_blank" rel="noopener" href="https://eligrey.com/blog/saving-generated-files-on-the-client-side/">filesaver</a> HTML5 saveAs() FileSaver实现</li>
</ul>
<h2 id="Filepond"><a href="#Filepond" class="headerlink" title="Filepond"></a>Filepond</h2><ul>
<li><a target="_blank" rel="noopener" href="https://pqina.nl/filepond">filepond</a> 灵活有趣的JavaScript文件上传库</li>
</ul>
<h2 id="React-Dropzone"><a href="#React-Dropzone" class="headerlink" title="React Dropzone"></a>React Dropzone</h2><ul>
<li><a target="_blank" rel="noopener" href="https://react-dropzone.js.org/">react-dropzone</a> 使用React.js的简单HTML5拖放区。</li>
</ul>
<h1 id="UI"><a href="#UI" class="headerlink" title="UI"></a>UI</h1><h2 id="Layui"><a href="#Layui" class="headerlink" title="Layui"></a>Layui</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.layui.com/">layui</a> 采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写形式，极低门槛，拿来即用。</li>
</ul>
<h2 id="Styled-Components"><a href="#Styled-Components" class="headerlink" title="Styled Components"></a>Styled Components</h2><ul>
<li><a target="_blank" rel="noopener" href="https://styled-components.com/">styled-components</a> 组件年龄的视觉图元。使用ES6和CSS的最佳功能来轻松设置应用样式</li>
</ul>
<h2 id="Tailwindcss-1"><a href="#Tailwindcss-1" class="headerlink" title="Tailwindcss"></a>Tailwindcss</h2><ul>
<li><a target="_blank" rel="noopener" href="https://tailwindcss.com/">tailwindcss</a> 实用程序优先的CSS框架，用于快速UI开发。</li>
</ul>
<h2 id="Storybook"><a href="#Storybook" class="headerlink" title="Storybook"></a>Storybook</h2><ul>
<li><a target="_blank" rel="noopener" href="https://storybook.js.org/">storybook</a> UI组件浏览器。为React，Vue，Angular，Ember，Web Components等开发，记录和测试！</li>
</ul>
<h2 id="Ionicframework"><a href="#Ionicframework" class="headerlink" title="Ionicframework"></a>Ionicframework</h2><ul>
<li><a target="_blank" rel="noopener" href="https://ionicframework.com/">ionicframework</a></li>
<li>功能强大的跨平台UI工具包，用于使用HTML，CSS和JavaScript构建本机质量的iOS，Android和Progressive Web Apps。</li>
</ul>
<h2 id="Material-Design-Lite"><a href="#Material-Design-Lite" class="headerlink" title="Material Design Lite"></a>Material Design Lite</h2><ul>
<li><a target="_blank" rel="noopener" href="https://getmdl.io/">getmdl</a> HTML / CSS / JS中的材料设计组件</li>
</ul>
<h2 id="Reveal-js"><a href="#Reveal-js" class="headerlink" title="Reveal.js"></a>Reveal.js</h2><ul>
<li><a target="_blank" rel="noopener" href="https://revealjs.com/">revealjs</a> 是一个开放源代码HTML表示框架。它是一种工具，使任何使用Web浏览器的人都可以免费创建功能齐全且美观的演示文稿。</li>
</ul>
<h2 id="Headlessui"><a href="#Headlessui" class="headerlink" title="Headlessui"></a>Headlessui</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/tailwindlabs/headlessui">headlessui</a> 完全无样式的，完全可访问的UI组件，旨在与Tailwind CSS完美集成。</li>
</ul>
<h1 id="图表、数据可视化"><a href="#图表、数据可视化" class="headerlink" title="图表、数据可视化"></a>图表、数据可视化</h1><h2 id="Chart"><a href="#Chart" class="headerlink" title="Chart"></a>Chart</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.chartjs.org/">chartjs</a> 使用 <code>&lt;canvas&gt;&lt;/canvas&gt;</code> 标签的简单HTML5图表</li>
</ul>
<h2 id="D3"><a href="#D3" class="headerlink" title="D3"></a>D3</h2><ul>
<li><a target="_blank" rel="noopener" href="https://d3js.org/">d3</a> 借助SVG，Canvas和HTML使数据栩栩如生。</li>
</ul>
<h2 id="Incubator-Superset"><a href="#Incubator-Superset" class="headerlink" title="Incubator Superset"></a>Incubator Superset</h2><ul>
<li><a target="_blank" rel="noopener" href="https://superset.incubator.apache.org/">superset.incubator</a> Apache Superset是一个数据可视化和数据探索平台</li>
</ul>
<h2 id="echarts"><a href="#echarts" class="headerlink" title="echarts"></a>echarts</h2><ul>
<li><a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/index.html">echarts</a> Apache ECharts（正在孵化）是用于浏览器的功能强大的交互式图表和数据可视化库</li>
</ul>
<h1 id="移动端"><a href="#移动端" class="headerlink" title="移动端"></a>移动端</h1><h2 id="uni-app"><a href="#uni-app" class="headerlink" title="uni-app"></a>uni-app</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.net.cn/">uni-app</a> 是使用Vue语法开发小程序，H5，App的统一框架</li>
</ul>
<h2 id="weex"><a href="#weex" class="headerlink" title="weex"></a>weex</h2><h2 id="Create-React-Native-App-1"><a href="#Create-React-Native-App-1" class="headerlink" title="Create React Native App"></a>Create React Native App</h2><h2 id="Flutter"><a href="#Flutter" class="headerlink" title="Flutter"></a>Flutter</h2><h2 id="MPVue"><a href="#MPVue" class="headerlink" title="MPVue"></a>MPVue</h2><ul>
<li><a target="_blank" rel="noopener" href="http://mpvue.com/">mpvue</a> 基于Vue.js的小程序开发框架，从长期支持Vue.js语法和内置工具体系。</li>
</ul>
<h2 id="Taro"><a href="#Taro" class="headerlink" title="Taro"></a>Taro</h2><ul>
<li><a target="_blank" rel="noopener" href="https://taro.zone/">taro</a></li>
<li>开放式跨端跨框架解决方案，支持使用阵营/ Vue公司/ NERV等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ小程序/ H5等应用。</li>
</ul>
<h2 id="Lottie-Web"><a href="#Lottie-Web" class="headerlink" title="Lottie Web"></a>Lottie Web</h2><ul>
<li><a target="_blank" rel="noopener" href="http://airbnb.io/lottie/">lottie-web</a> 在Web，Android和iOS以及React Native上本地渲染After Effects动画。</li>
</ul>
<h2 id="DiscreteScrollView"><a href="#DiscreteScrollView" class="headerlink" title="DiscreteScrollView"></a>DiscreteScrollView</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/yarolegovich/DiscreteScrollView">DiscreteScrollView</a></li>
<li>可滚动的项目列表，以当前元素为中心，并提供易于使用的API（用于酷炫的项目动画）。</li>
</ul>
<h2 id="Android-SpinKit"><a href="#Android-SpinKit" class="headerlink" title="Android-SpinKit"></a>Android-SpinKit</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/ybq/Android-SpinKit">Android-SpinKit</a> Android加载动画</li>
</ul>
<h2 id="React-Native-Elements"><a href="#React-Native-Elements" class="headerlink" title="React Native Elements"></a>React Native Elements</h2><ul>
<li><a target="_blank" rel="noopener" href="https://reactnativeelements.com/">react-native-elements</a> 跨平台React Native UI工具包</li>
</ul>
<h2 id="React-Native-Firebase"><a href="#React-Native-Firebase" class="headerlink" title="React Native Firebase"></a>React Native Firebase</h2><ul>
<li><a target="_blank" rel="noopener" href="https://rnfirebase.io/">react-native-firebase</a></li>
<li>经过测试的功能丰富的模块化Firebase实施，用于React Native。同时支持所有Firebase服务的iOS和Android平台。</li>
</ul>
<h2 id="React-Native-Snap-Carousel"><a href="#React-Native-Snap-Carousel" class="headerlink" title="React Native Snap Carousel"></a>React Native Snap Carousel</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/archriss/react-native-snap-carousel">react-native-snap-carousel</a></li>
<li>React Native的滑动器/旋转木马组件，具有预览，多种布局，视差图像，对大量项目的高性能处理等。与Android和iOS兼容。</li>
</ul>
<h2 id="React-Native-Calendars"><a href="#React-Native-Calendars" class="headerlink" title="React Native Calendars"></a>React Native Calendars</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/wix/react-native-calendars">react-native-calendars</a> 关于反应本机日历组件 🗓️ 📆</li>
</ul>
<h2 id="Joplin"><a href="#Joplin" class="headerlink" title="Joplin"></a>Joplin</h2><ul>
<li><a target="_blank" rel="noopener" href="https://discourse.joplinapp.org/">joplin</a></li>
<li>Joplin-具有Windows，macOS，Linux，Android和iOS同步功能的开源笔记记录和待办事项应用程序</li>
</ul>
<h2 id="Appium"><a href="#Appium" class="headerlink" title="Appium"></a>Appium</h2><ul>
<li><a target="_blank" rel="noopener" href="http://appium.io/">appium</a> 📱 适用于iOS，Android和Windows Apps的自动化。</li>
</ul>
<h2 id="NativeBase"><a href="#NativeBase" class="headerlink" title="NativeBase"></a>NativeBase</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nativebase.io/">NativeBase</a> React Native的基本跨平台UI组件</li>
</ul>
<h2 id="Framework7"><a href="#Framework7" class="headerlink" title="Framework7"></a>Framework7</h2><ul>
<li><a target="_blank" rel="noopener" href="http://framework7.io/">framework7</a> 用于构建iOS和Android应用程序的全功能HTML框架</li>
</ul>
<h1 id="VSCode-插件"><a href="#VSCode-插件" class="headerlink" title="VSCode 插件"></a>VSCode 插件</h1><ul>
<li>具体可以看 <a target="_blank" rel="noopener" href="https://juejin.cn/user/3808363978439005">CRPER</a> 掘金的 VSCode 文章，从第一篇开始，好像总共十五篇，下面扒下一些用过的</li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903459259432968">VS Code折腾记 - (1)扯淡</a></li>
</ul>
<h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/sdras/vue-vscode-snippets">vue-vscode-snippets</a> vue 代码片段</li>
<li><a target="_blank" rel="noopener" href="https://vuejs.github.io/vetur/">Vuter</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=ShaofeiZi.vscode-vue-typescript-snippets">Vue TypeScript Snippets</a> : 针对 <code>vue</code>的 <code>ts</code>代码片段</li>
</ul>
<h2 id="React-1"><a href="#React-1" class="headerlink" title="React"></a>React</h2><ul>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">ES7 React/Redux/GraphQL/React-Native snippets</a>:最好用的 <code>snippet</code>汇总,非常全面,墙裂推荐!!!</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet">React Native Snippet</a>: RN 代码片段</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=ka05.react-explorer-addons">react-explorer-addons</a>: 增加鼠标右键直接生成react的组件模板,好不好用,用过的才知道</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense">React PropTypes Intellisense</a>: React props的智能提示</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components">vscode-styled-components</a>: 对 <code>styled-componnents</code>的支持,高亮包括智能提示</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=jonkwheeler.styled-components-snippets">styled-components-snippets</a> : <code>styled-components</code>的代码片段</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=suming.react-proptypes-generate">React PropTypes Generate</a> : 一键生成 <code>react</code>的 <code>proptypes</code> , 不用 <code>ts</code>的小伙伴必备</p>
</li>
</ul>
<h2 id="微信小程序"><a href="#微信小程序" class="headerlink" title="微信小程序"></a>微信小程序</h2><ul>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=banxi.mpvue-snippets">mpvue snippets</a>: <code>mpvue</code>的一些代码片段,以及部分原生小程序的代码提示</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode">minapp</a> : 用 <code>VS Code</code>写小程序必备的插件,里面有众多实用的特性集成</li>
</ul>
<h2 id="代码测试"><a href="#代码测试" class="headerlink" title="代码测试"></a>代码测试</h2><ul>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest">Jest</a>: 让你写 <code>Jest</code>代码有IDE的感觉</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter">Mocha Test Explorer</a>: 针对 <code>mocha</code>测试的GUI话,会给编辑器多一个独立的版块</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters">Coverage Gutters</a> : 可以直观的看到你代码覆盖率的区域</li>
</ul>
<h2 id="代码可视化改善"><a href="#代码可视化改善" class="headerlink" title="代码可视化改善"></a>代码可视化改善</h2><ul>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode">Polacode</a> : 生成精美的代码截图,很漂亮,根据你当前主题配色生成的</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=jaspernorth.vscode-pigments">vscode-pigments</a>: 代码页面展示颜色代码并展示对应的颜色,非常实用</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=nickdemayo.vscode-json-editor">Json Editor</a> : 非常实用的可视化 <code>JSON</code>编辑,不容错过</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets">Subtle Match Brackets</a>:快速高亮你配置的闭合,对于聚焦我们的光标区块代码很有帮助</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">vscode-live-server</a> : 非常全面的HTML预览工具,支持众多实际开发需要的特性,比如 <code>https</code>, <code>&amp;#x4EE3;&amp;#x7406;</code>, <code>cros</code></li>
</ul>
<h2 id="格式化"><a href="#格式化" class="headerlink" title="格式化"></a>格式化</h2><ul>
<li>prettier</li>
<li>ESLint</li>
<li>Prettier ESLint</li>
</ul>
<h2 id="主题"><a href="#主题" class="headerlink" title="主题"></a>主题</h2><ul>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode">Dainty</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=TobiasTimm.umi">Umi</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/itemdetails?itemName=miguelsolorio.min-theme">Min Theme</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten">Snazzy Plus</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=neilpanchal.hypersubatomic">Hypersubatomic</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons">VSCode Great Icons</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=mariorodeghiero.vue-theme">Vue Theme</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme">Palenight Theme</a></li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode">Horizon Theme</a></li>
</ul>
<h1 id="杂乱的工具"><a href="#杂乱的工具" class="headerlink" title="杂乱的工具"></a>杂乱的工具</h1><h2 id="Epic-Spinners"><a href="#Epic-Spinners" class="headerlink" title="Epic Spinners"></a>Epic Spinners</h2><ul>
<li><a target="_blank" rel="noopener" href="https://epic-spinners.epicmax.co/">epic-spinners</a> 易于使用的CSS微调器集合与Vue.js集成</li>
</ul>
<h2 id="Nprogress"><a href="#Nprogress" class="headerlink" title="Nprogress"></a>Nprogress</h2><ul>
<li><a target="_blank" rel="noopener" href="http://ricostacruz.com/nprogress">nprogress</a> 适用于YouTube，Medium等上的苗条进度条</li>
</ul>
<h2 id="Nodemailer"><a href="#Nodemailer" class="headerlink" title="Nodemailer"></a>Nodemailer</h2><ul>
<li><a target="_blank" rel="noopener" href="http://nodemailer.com/">nodemailer</a> 使用Node.JS发送电子邮件-就像蛋糕一样容易！</li>
</ul>
<h2 id="Driver"><a href="#Driver" class="headerlink" title="Driver"></a>Driver</h2><ul>
<li><a target="_blank" rel="noopener" href="https://kamranahmed.info/driver.js/">driver</a> 轻巧，无依赖的原始JavaScript引擎，可在页面上吸引用户的注意力</li>
</ul>
<h2 id="Dayjs"><a href="#Dayjs" class="headerlink" title="Dayjs"></a>Dayjs</h2><ul>
<li><a target="_blank" rel="noopener" href="https://day.js.org/">dayjs</a> 具有相同现代API的Day.js 2KB不可变日期时间库替代Moment.js</li>
</ul>
<h2 id="Glider"><a href="#Glider" class="headerlink" title="Glider"></a>Glider</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nickpiscitelli.github.io/Glider.js">glider.js</a> 快速，轻巧，无依赖的本地滚动轮播替代品！</li>
</ul>
<h2 id="Mockjs"><a href="#Mockjs" class="headerlink" title="Mockjs"></a>Mockjs</h2><ul>
<li><a target="_blank" rel="noopener" href="http://mockjs.com/">mock</a> 模拟数据生成器</li>
</ul>
<h2 id="Faker"><a href="#Faker" class="headerlink" title="Faker"></a>Faker</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/Marak/faker.js">faker.js</a> 在Node.js和浏览器中生成大量逼真的假数据</li>
</ul>
<h2 id="Sailsjs"><a href="#Sailsjs" class="headerlink" title="Sailsjs"></a>Sailsjs</h2><ul>
<li><a target="_blank" rel="noopener" href="https://sailsjs.com/">sailsjs</a> 适用于Node.js的实时MVC框架</li>
</ul>
<h2 id="Swiper"><a href="#Swiper" class="headerlink" title="Swiper"></a>Swiper</h2><ul>
<li><a target="_blank" rel="noopener" href="https://swiperjs.com/">swiper</a> 最现代的移动触摸滑块，具有硬件加速的过渡</li>
</ul>
<h2 id="fullPage-全屏滚动"><a href="#fullPage-全屏滚动" class="headerlink" title="fullPage 全屏滚动"></a>fullPage 全屏滚动</h2><ul>
<li><a target="_blank" rel="noopener" href="http://alvarotrigo.com/fullPage/">fullPage</a> Alvaro Trigo的fullPage插件。快速简单地创建全屏页面</li>
</ul>
<h2 id="screenfull-js-全屏"><a href="#screenfull-js-全屏" class="headerlink" title="screenfull.js 全屏"></a>screenfull.js 全屏</h2><ul>
<li><a target="_blank" rel="noopener" href="https://sindresorhus.com/screenfull.js">screenfull</a> 用于JavaScript全屏API的跨浏览器使用的简单包装</li>
</ul>
<h2 id="html2canvas-屏幕截图"><a href="#html2canvas-屏幕截图" class="headerlink" title="html2canvas 屏幕截图"></a>html2canvas 屏幕截图</h2><ul>
<li><a target="_blank" rel="noopener" href="https://html2canvas.hertzen.com/">html2canvas</a> 使用JavaScript的屏幕截图</li>
</ul>
<h2 id="Prism-代码高亮"><a href="#Prism-代码高亮" class="headerlink" title="Prism 代码高亮"></a>Prism 代码高亮</h2><ul>
<li><a target="_blank" rel="noopener" href="https://prismjs.com/">prism</a> 轻巧，健壮，优雅的语法突出显示。</li>
</ul>
<h2 id="Draggabilly-拖拽"><a href="#Draggabilly-拖拽" class="headerlink" title="Draggabilly 拖拽"></a>Draggabilly 拖拽</h2><ul>
<li><a target="_blank" rel="noopener" href="https://draggabilly.desandro.com/">draggabilly</a> 使该元素可拖动</li>
</ul>
<h2 id="Modernizr"><a href="#Modernizr" class="headerlink" title="Modernizr"></a>Modernizr</h2><ul>
<li><a target="_blank" rel="noopener" href="https://modernizr.com/">modernizr</a> Modernizr是一个JavaScript库，可检测用户浏览器中的HTML5和CSS3功能。</li>
</ul>
<h2 id="html5-boilerplate-模板"><a href="#html5-boilerplate-模板" class="headerlink" title="html5-boilerplate 模板"></a>html5-boilerplate 模板</h2><ul>
<li><a target="_blank" rel="noopener" href="https://html5boilerplate.com/">html5-boilerplate</a> 专业的前端模板，用于构建快速，健壮和适应性强的Web应用程序或网站。</li>
</ul>
<h2 id="Magic-Of-Css"><a href="#Magic-Of-Css" class="headerlink" title="Magic Of Css"></a>Magic Of Css</h2><ul>
<li><a target="_blank" rel="noopener" href="https://adamschwartz.co/magic-of-css">magic-of-css</a> CSS课程，使您成为魔术师。</li>
</ul>
<h2 id="Odometer"><a href="#Odometer" class="headerlink" title="Odometer"></a>Odometer</h2><ul>
<li><a target="_blank" rel="noopener" href="http://github.hubspot.com/odometer/docs/welcome">odometer</a> 轻松平滑地过渡数字</li>
</ul>
<h2 id="Proton-粒子"><a href="#Proton-粒子" class="headerlink" title="Proton 粒子"></a>Proton 粒子</h2><ul>
<li><a target="_blank" rel="noopener" href="https://drawcall.github.io/Proton/">proton</a> Javascript粒子动画库</li>
</ul>
<h2 id="particle-js-粒子"><a href="#particle-js-粒子" class="headerlink" title="particle.js 粒子"></a>particle.js 粒子</h2><ul>
<li><a target="_blank" rel="noopener" href="https://vincentgarreau.com/particles.js/">particle</a> 用于创建粒子的轻量级JavaScript库</li>
</ul>
<h2 id="ParticleEffectsButtons"><a href="#ParticleEffectsButtons" class="headerlink" title="ParticleEffectsButtons"></a>ParticleEffectsButtons</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/codrops/ParticleEffectsButtons">ParticleEffectsButtons</a> 一个小的库，可用于使按钮和其他元素上的粒子效果破裂</li>
</ul>
<h2 id="Fabric-js-画布"><a href="#Fabric-js-画布" class="headerlink" title="Fabric.js 画布"></a>Fabric.js 画布</h2><ul>
<li><a target="_blank" rel="noopener" href="https://wiki.hyperledger.org/display/fabric">fabric</a></li>
<li>Hyperledger Fabric是用于开发解决方案和应用程序的企业级许可的分布式分类帐框架。其模块化和通用设计满足了广泛的行业用例。它提供了一种独特的共识方法，可在保持隐私的同时实现大规模性能。</li>
</ul>
<h2 id="Sortable"><a href="#Sortable" class="headerlink" title="Sortable"></a>Sortable</h2><ul>
<li><a target="_blank" rel="noopener" href="https://sortablejs.github.io/Sortable/">Sortable</a> 通过拖放创建列表并重新排序。适用于现代浏览器和触摸设备</li>
</ul>
<h2 id="jsPDF"><a href="#jsPDF" class="headerlink" title="jsPDF"></a>jsPDF</h2><ul>
<li><a target="_blank" rel="noopener" href="https://parall.ax/products/jspdf">jsPDF</a> 面向所有人的客户端JavaScript PDF生成。</li>
</ul>
<h2 id="Video"><a href="#Video" class="headerlink" title="Video"></a>Video</h2><ul>
<li><a target="_blank" rel="noopener" href="https://videojs.com/">videojs</a></li>
<li>Video.js-开源HTML5和Flash视频播放器</li>
</ul>
<h2 id="Better-Scroll"><a href="#Better-Scroll" class="headerlink" title="Better Scroll"></a>Better Scroll</h2><ul>
<li><a target="_blank" rel="noopener" href="https://better-scroll.github.io/docs/en-US/">better-scroll</a> 受iscroll的启发，它支持更多功能并具有更好的滚动性能</li>
</ul>
<h2 id="PDF"><a href="#PDF" class="headerlink" title="PDF"></a>PDF</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/mozilla/pdf.js">pdf</a></li>
<li>JavaScript中的PDF阅读器</li>
</ul>
<h2 id="Clipboard"><a href="#Clipboard" class="headerlink" title="Clipboard"></a>Clipboard</h2><ul>
<li><a target="_blank" rel="noopener" href="https://clipboardjs.com/">clipboardjs</a></li>
<li>现代复制到剪贴板。没有闪光灯。压缩后只有3kb📋</li>
</ul>
<h2 id="Nylas-Mail"><a href="#Nylas-Mail" class="headerlink" title="Nylas Mail"></a>Nylas Mail</h2><ul>
<li><a target="_blank" rel="noopener" href="https://nylas.com/nylas-mail/">nylas-mail</a></li>
<li>基于现代网络的可扩展桌面邮件应用程序。货叉欢迎！</li>
</ul>
<h2 id="Sheet"><a href="#Sheet" class="headerlink" title="Sheet"></a>Sheet</h2><ul>
<li><a target="_blank" rel="noopener" href="https://sheetjs.com/">sheetjs</a> SheetJS社区版-电子表格数据工具包</li>
</ul>
<h2 id="React-Content-Loader"><a href="#React-Content-Loader" class="headerlink" title="React Content Loader"></a>React Content Loader</h2><ul>
<li><a target="_blank" rel="noopener" href="http://danilowoz.com/create-content-loader/">react-content-loader</a> SVG供电的组件可轻松创建骨架荷载。</li>
</ul>
<h2 id="SkeletonView"><a href="#SkeletonView" class="headerlink" title="SkeletonView"></a>SkeletonView</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/Juanpe/SkeletonView">SkeletonView</a> 向用户显示正在发生的事情并为他们准备要等待的内容的一种优雅方式</li>
</ul>
<h2 id="Match-Sorter"><a href="#Match-Sorter" class="headerlink" title="Match Sorter"></a>Match Sorter</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/kentcdodds/match-sorter">match-sorter</a> JavaScript中数组的简单，预期和确定性最佳匹配排序</li>
</ul>
<h2 id="Luckysheet"><a href="#Luckysheet" class="headerlink" title="Luckysheet"></a>Luckysheet</h2><ul>
<li><a target="_blank" rel="noopener" href="https://mengshukeji.github.io/LuckysheetDocs/">Luckysheet</a> 是像excel这样的在线电子表格，功能强大，易于配置且完全开源。</li>
</ul>
<h2 id="GraphQL"><a href="#GraphQL" class="headerlink" title="GraphQL"></a>GraphQL</h2><h3 id="Hasura"><a href="#Hasura" class="headerlink" title="Hasura"></a>Hasura</h3><ul>
<li><a target="_blank" rel="noopener" href="https://hasura.io/">hasura</a></li>
<li>具有细粒度访问控制的Postgres具有快速，即时的实时GraphQL API，还可以触发数据库事件的Webhooks。</li>
</ul>
<h2 id="Preact"><a href="#Preact" class="headerlink" title="Preact"></a>Preact</h2><ul>
<li><a target="_blank" rel="noopener" href="https://preactjs.com/">preactjs</a></li>
<li>具有相同现代API的快速3kB React替代方案。组件和虚拟DOM。</li>
<li>您可以在<a target="_blank" rel="noopener" href="https://github.com/preactjs/awesome-preact">awesome-preact列表中</a>找到一些很棒的库</li>
</ul>
<h2 id="Realworld"><a href="#Realworld" class="headerlink" title="Realworld"></a>Realworld</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/gothinkster/realworld">realworld</a></li>
<li>“所有演示应用程序之母” —由React，Angular，Node，Django等提供支持的示例性全栈Medium.com克隆</li>
</ul>
<h2 id="Type-Fest"><a href="#Type-Fest" class="headerlink" title="Type Fest"></a>Type Fest</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/sindresorhus/type-fest">类型节</a> 基本TypeScript类型的集合</li>
</ul>
<h2 id="Edex-UI"><a href="#Edex-UI" class="headerlink" title="Edex UI"></a>Edex UI</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/GitSquared/edex-ui">edex-ui</a> 具有高级监控和触摸屏支持的跨平台，可定制的科幻终端仿真器。</li>
</ul>
<h2 id="Serverless"><a href="#Serverless" class="headerlink" title="Serverless"></a>Serverless</h2><ul>
<li><a target="_blank" rel="noopener" href="https://serverless.com/">serverless</a></li>
<li>无服务器框架–使用AWS Lambda，Azure Functions，Google CloudFunctions及更多功能，利用无服务器架构构建Web，移动和IoT应用！</li>
</ul>
<h2 id="Meteor"><a href="#Meteor" class="headerlink" title="Meteor"></a>Meteor</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.meteor.com/">meteor</a> JavaScript应用平台</li>
</ul>
<h2 id="Snowpack"><a href="#Snowpack" class="headerlink" title="Snowpack"></a>Snowpack</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/snowpackjs/snowpack">snowpack</a> WASM支持的前端构建工具。快速，轻巧，无捆绑的ESM。✌️</li>
</ul>
<h2 id="Headless-Recorder"><a href="#Headless-Recorder" class="headerlink" title="Headless Recorder"></a>Headless Recorder</h2><ul>
<li><a target="_blank" rel="noopener" href="https://checklyhq.com/headless-recorder">headless-recorder</a> 无头记录器是Chrome扩展程序，可记录您的浏览器交互并生成人偶或剧本脚本。</li>
</ul>
<h2 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/github/gitignore">gitignore</a> 有用的.gitignore模板的集合</li>
</ul>
<h2 id="Cheatsheets"><a href="#Cheatsheets" class="headerlink" title="Cheatsheets"></a>Cheatsheets</h2><ul>
<li><a target="_blank" rel="noopener" href="https://devhints.io/">cheatsheets</a> 备忘录</li>
</ul>
<h2 id="LightHouse"><a href="#LightHouse" class="headerlink" title="LightHouse"></a>LightHouse</h2><ul>
<li>LightHouse 是一个开源的自动化工具，用于改进网络应用的质量。</li>
<li>可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。</li>
</ul>
<h2 id="Can-I-Use"><a href="#Can-I-Use" class="headerlink" title="Can I Use"></a>Can I Use</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.caniuse.com/">caniuse</a> 来自caniuse.com的原始浏览器/功能支持数据</li>
</ul>
<h2 id="Carbon"><a href="#Carbon" class="headerlink" title="Carbon"></a>Carbon</h2><ul>
<li><a target="_blank" rel="noopener" href="https://carbon.now.sh/">Carbon</a> 创建并共享源代码的精美图片</li>
</ul>
<h2 id="ios-font"><a href="#ios-font" class="headerlink" title="ios font"></a>ios font</h2><ul>
<li><a target="_blank" rel="noopener" href="http://iosfonts.com/">ios font</a></li>
<li>IOS 字体支持查询和 IOS 系统自带字体查询。</li>
</ul>
<h2 id="TinyPNG"><a href="#TinyPNG" class="headerlink" title="TinyPNG"></a>TinyPNG</h2><ul>
<li><a target="_blank" rel="noopener" href="https://tinypng.com/">TinyPNG</a></li>
<li>PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩。</li>
<li>TinyPNG 使用智能有损压缩技术将您的 PNG 文件的文件大小降低。 通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。</li>
</ul>
<h2 id="Shape-Divider"><a href="#Shape-Divider" class="headerlink" title="Shape Divider"></a>Shape Divider</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.shapedivider.app/">Shape Divider</a></li>
<li>定制各种形状的网站分区 SVG 的工具，调整好了自己想要的形状之后，可以一键复制和下载。</li>
</ul>
<h2 id="json-格式化"><a href="#json-格式化" class="headerlink" title="json 格式化"></a>json 格式化</h2><ul>
<li><a target="_blank" rel="noopener" href="http://json.cn/">json 格式化</a></li>
<li>这是一个 json 在线解析的网站</li>
<li>功能包括了：json 在线解析，json 格式化，json 格式验证，json 转 xml，xml 转 json，json 压缩，json 转义，js 混淆加密，JSON 转实体，json 在线，JSON 校验。</li>
</ul>
<h2 id="FeHelper"><a href="#FeHelper" class="headerlink" title="FeHelper"></a>FeHelper</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.baidufe.com/fehelper/index/index.html">JSON 美化工具</a></li>
<li>FH 有一系列的简便工具</li>
</ul>
<h2 id="sojson"><a href="#sojson" class="headerlink" title="sojson"></a>sojson</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.sojson.com/">sojson</a> 这是一个功能多到发指的网站！</li>
</ul>
<h2 id="Docz"><a href="#Docz" class="headerlink" title="Docz"></a>Docz</h2><ul>
<li><a target="_blank" rel="noopener" href="https://docz.site/">docz</a> 记录您的东西从未如此简单！</li>
</ul>
<h2 id="Bug-检测工具"><a href="#Bug-检测工具" class="headerlink" title="Bug 检测工具"></a>Bug 检测工具</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.fundebug.com/?utm_source=xiaozhi">Fundebug</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-devtools">vue-devtools</a> 浏览器devtools扩展，用于调试Vue.js应用程序。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/zalmoxisus/redux-devtools-extension">redux-devtools-extension</a> Redux DevTools扩展。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/jhen0409/react-native-debugger">react-native-debugger</a> 基于React Native官方调试器的独立应用程序，包括React Inspector / Redux DevTools</li>
<li><a target="_blank" rel="noopener" href="https://github.com/GoogleChromeLabs/ndb">ndb</a> 是由Chrome DevTools支持的Node.js改进的调试体验</li>
<li><a target="_blank" rel="noopener" href="https://github.com/visionmedia/debug">debug</a> 一个模仿Node.js核心调试技术的微型JavaScript调试实用程序。可在Node.js和Web浏览器中使用</li>
<li><a target="_blank" rel="noopener" href="https://wproxy.org/">wproxy</a> HTTP，HTTP2，HTTPS，Websocket调试代理</li>
<li><a target="_blank" rel="noopener" href="https://github.com/wuchangming/spy-debugger">spy-debugger</a> 微信调试，各种WebView样式调试，手机浏览器的页面真机调试。便捷的远程调试手机页面，抓包工具，支持：HTTP / HTTPS，无需USB连接设备。</li>
</ul>
<h2 id="在线编辑"><a href="#在线编辑" class="headerlink" title="在线编辑"></a>在线编辑</h2><ul>
<li><p><a target="_blank" rel="noopener" href="https://jsbin.com/">jsbin</a> 协同JavaScript调试应用</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://codepen.io/">Codepen</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo">PicGo</a> : 很实用的图床上传工具,直接返回 <code>url</code>,用了都说好.</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=TomasHubelbauer.vscode-markdown-link-suggestions">MarkDown Link Suggestions</a> : <code>md</code>内本地资源智能提示</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=atalent.markdown-command-assist">Markdown Command Assist</a>:傻瓜化 <code>md</code>使用,鼠标右键选择生成</p>
</li>
</ul>
<h1 id="国内外优秀网站"><a href="#国内外优秀网站" class="headerlink" title="国内外优秀网站"></a>国内外优秀网站</h1><h2 id="国内"><a href="#国内" class="headerlink" title="国内"></a>国内</h2><ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/">掘金</a></li>
<li><a target="_blank" rel="noopener" href="https://www.zhangxinxu.com/">张鑫旭大佬的博客</a></li>
<li><a target="_blank" rel="noopener" href="https://www.liaoxuefeng.com/">廖雪峰的官方网站</a></li>
<li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/">阮一峰的网络日志</a></li>
<li><a target="_blank" rel="noopener" href="https://aotu.io/">凹凸实验室</a></li>
<li><a target="_blank" rel="noopener" href="https://tech.meituan.com/">美团技术团队</a></li>
<li><a target="_blank" rel="noopener" href="https://xcloud.alipay.com/">蚂蚁体验科技</a></li>
<li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/elemefe">ElemeFe</a></li>
<li><a target="_blank" rel="noopener" href="https://zh.javascript.info/">现代 JavaScript 教程</a></li>
<li><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/">ES6 入门教学</a></li>
<li>…</li>
</ul>
<h2 id="国外"><a href="#国外" class="headerlink" title="国外"></a>国外</h2><ul>
<li><a target="_blank" rel="noopener" href="https://css-tricks.com/">CSS-Tricks</a></li>
<li><a target="_blank" rel="noopener" href="https://www.30secondsofcode.org/">30 seconds of code</a></li>
<li><a target="_blank" rel="noopener" href="https://scotch.io/">scotch</a></li>
<li><a target="_blank" rel="noopener" href="https://www.freecodecamp.org/">freeCodeCamp</a></li>
<li><a target="_blank" rel="noopener" href="https://stackoverflow.com/">stackoverflow</a></li>
<li><a target="_blank" rel="noopener" href="https://www.sitepoint.com/">sitepoint</a></li>
<li><a target="_blank" rel="noopener" href="https://egghead.io/">egghead</a></li>
<li><a target="_blank" rel="noopener" href="https://www.smashingmagazine.com/">SMASHING</a></li>
<li><a target="_blank" rel="noopener" href="https://www.samanthaming.com/">samanthaming</a></li>
<li><a target="_blank" rel="noopener" href="https://exercism.io/tracks/javascript">exercism</a></li>
<li>…</li>
</ul>
<h1 id="GitHub-上优秀的前端学习指南"><a href="#GitHub-上优秀的前端学习指南" class="headerlink" title="GitHub 上优秀的前端学习指南"></a>GitHub 上优秀的前端学习指南</h1><ul>
<li><a target="_blank" rel="noopener" href="https://frontendchecklist.io/">frontendchecklist</a> 适用于现代网站和细致开发人员的完美前端清单</li>
<li><a target="_blank" rel="noopener" href="https://yangshun.github.io/front-end-interview-handbook/">front-end-interview-handbook</a> 著名的h5bp”前端求职面试问题”的答案不废话</li>
<li><a target="_blank" rel="noopener" href="https://yangshun.github.io/tech-interview-handbook/">tech-interview-handbook</a> 帮助您完成下一次编码面试的材料</li>
<li><a target="_blank" rel="noopener" href="https://muyiy.cn/question/">Daily-Interview-Question</a> 工作日每天一道大厂前端面试题，一年后再回头，会感谢曾经努力的自己！</li>
<li><a target="_blank" rel="noopener" href="https://github.com/bradtraversy/design-resources-for-developers">开发人员设计资源</a> 从库存照片，Web模板，CSS框架，UI库，工具等中精选设计和UI资源的清单</li>
<li><a target="_blank" rel="noopener" href="https://github.com/airbnb/javascript">javascript</a> JavaScript样式指南</li>
<li><a target="_blank" rel="noopener" href="https://github.com/TheAlgorithms/Javascript">Javascript</a> 使用Javascript实现的所有算法的存储库（仅用于教育目的）</li>
<li><a target="_blank" rel="noopener" href="https://github.com/trekhleb/javascript-algorithms">javascript算法</a> 用JavaScript实现的算法和数据结构，并带有解释和进一步阅读的链接</li>
<li><a target="_blank" rel="noopener" href="https://gitbook.gitbook.io/learn-javascript/">learn-javascript</a> 使用Javascript的GitBook教学编程基础</li>
<li><a target="_blank" rel="noopener" href="https://github.com/lydiahallie/javascript-questions">JavaScript questions</a> 一长串（高级）JavaScript 问题及其解释</li>
<li><a target="_blank" rel="noopener" href="https://github.com/ryanmcdermott/clean-code-javascript">clean-code-javascript</a> 适用于JavaScript的简洁代码概念</li>
<li><a target="_blank" rel="noopener" href="https://javascript30.com/">javascript30</a> 30天JS挑战</li>
<li><a target="_blank" rel="noopener" href="https://github.com/leonardomso/33-js-concepts">33-js-concepts</a> 每个JavaScript开发人员都应该知道的33个概念。</li>
<li><a target="_blank" rel="noopener" href="https://fcc.asia/">fcc</a> FCC中国开源代码库和课程。学会编码和帮助非营利组织。</li>
<li><a target="_blank" rel="noopener" href="https://triplebyte.com/a/TfjWb6Y/d">awesome-interview-questions</a> 精选的面试问题清单。随时贡献！</li>
<li><a target="_blank" rel="noopener" href="https://leetcode-solution.cn/">leetcode-solution</a> LeetCode Solutions: A Record of My Problem Solving Journey.( leetcode题解，记录自己的leetcode解题之路。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/tuvtran/project-based-learning">project-based-learning</a> 精选的基于项目的教程列表</li>
<li><a target="_blank" rel="noopener" href="http://weibo.com/justjavac">free-programming-books-zh_CN</a> 免费的计算机编程类中文书籍，欢迎投稿</li>
<li><a target="_blank" rel="noopener" href="https://github.com/getify/You-Dont-Know-JS">You-Dont-Know-JS</a> 有关JavaScript的书籍系列。<a target="_blank" rel="noopener" href="https://github.com/YDKJS">@YDKJS</a>在Twitter上。</li>
<li><a target="_blank" rel="noopener" href="https://contribute.freecodecamp.org/">freecodecamp</a> freeCodeCamp.org的开源代码库和课程表。在家学习编码。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/shichuan/javascript-patterns">javascript-patterns</a> JavaScript模式</li>
<li><a target="_blank" rel="noopener" href="https://github.com/elsewhencode/project-guidelines">project-guidelines</a> 一组JavaScript项目的最佳做法</li>
<li><a target="_blank" rel="noopener" href="https://github.com/mqyqingfeng/Blog">冴羽的博客</a> 冴羽目前写的四个系列：JavaScript深度系列，JavaScript专题系列，ES6系列，React系列。</li>
<li><a target="_blank" rel="noopener" href="https://mbeaudru.github.io/modern-js-cheatsheet/">现代js备忘单</a> 有关现代项目中经常遇到的JavaScript知识的备忘单。</li>
<li><a target="_blank" rel="noopener" href="https://github.com/haizlin/fe-interview">fe-interview</a> 前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！</li>
<li><a target="_blank" rel="noopener" href="https://github.com/sudheerj/reactjs-interview-questions">reactjs-interview-questions</a> 前500ReactJS面试问答列表….编码练习题即将推出！！</li>
<li><a target="_blank" rel="noopener" href="https://30secondsofinterviews.org/">30-seconds-of-interviews</a> 精选的常见面试问题集合，可帮助您为下一次面试做准备。</li>
<li><a target="_blank" rel="noopener" href="https://airtable.com/shr3eGPDm3wGjT2gA">hiring-without-whiteboards</a> 招聘流程没有中断的公司</li>
<li><a target="_blank" rel="noopener" href="https://github.com/sindresorhus/awesome">awesome</a> 关于各种有趣主题的真棒列表</li>
<li><a target="_blank" rel="noopener" href="https://github.com/JackyAndroid/AndroidInterview-Q-A">AndroidInterview-Q-A</a> 顶级互联网公司android面试问答</li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%B7%A5%E5%85%B7%E5%B0%8F%E8%83%BD%E6%89%8B/">工具小能手</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/%E8%BD%AC%E8%BD%BD%E5%B7%A5%E5%85%B7%E5%90%88%E9%9B%86/">转载工具合集</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/3f721fcb/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">前端小记-Offset相关*</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/46563/">
                        <span class="hidden-mobile">正则表达式</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
